<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="我购买的" />
		<u-sticky bgColor="#fff">
			<u-tabs :current="activeTab" :list="tabList" @click="onTabChange" lineColor="#00C15D"
				:scrollable="false"></u-tabs>
		</u-sticky>
        <view class="space-block"></view>
		<view class="list">
			<view class="item" v-for="(item, index) in dataList.list" :key="index">
				<template v-if="activeTab == 0">
					<TopicPic :innerData="item" :index="index" layoutType="1" @collect="onCollect" />
				</template>
				<template v-if="activeTab == 1">
					<DatumPic :innerData="item" :index="index" layoutType="1" @collect="onCollect" />
				</template>
			</view>
		</view>
		<u-loadmore :status="dataList.loading"></u-loadmore>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import SchoolModule from '@/pagesBKS/components/school-module.vue'
	import MajorModule from '@/pagesBKS/components/major-module.vue'
	import TopicPic from '@/pagesBKS/datum/components/topic-pic.vue'
	import DatumPic from '@/pagesBKS/datum/components/datum-pic.vue'
	import { collectAdd, collectDel } from '@/api/bks.index'
	import { buyDatumList, buyTopicList } from '@/api/bks.datum'
	export default {
		components: {
			headerCustom,
			TopicPic,
			DatumPic
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				activeTab: 0,
				tabList: [
				{
					name: '专题',
					key: "3"
				}, {
					name: '资料',
					key: "4"
				}],
				dataList: { // 列表
					list: [],
					page: 1,
					size: 10,
					total: 0,
					loading: 'loading'
				},
			}
		},
		onLoad: function(options) {
			if (options.activeTab) {
				this.activeTab = Number(options.activeTab)
			}
		},
		onShow: function() {
			this.init()
			this.getList()
		},
		onReachBottom: function() {
			this.reachBottom()
		},
		methods: {
			// tab切换
			onTabChange(e) {
				this.activeTab = e.index
				this.init()
				this.getList()
			},
			// 数据初始化
			init() {
				this.dataList = {
					list: [],
					page: 1,
					size: 10,
					total: 0,
					loading: 'none'
				}
			},
			getList() {
				if (this.dataList.loading == 'nomore') {
					return
				}
				this.dataList.loading = 'loading'
				let api = null
				if (this.activeTab == 1) {
					api = buyDatumList;
				} else {
					api = buyTopicList;
				}
				api({ page: this.dataList.page, size: this.dataList.size }).then(res => {
					if (res.code != 200) {
						this.dataList.loading = 'noErr'
						return
					}
					let resList = []
					if (this.activeTab == 1) {
						res.data.list.forEach((item, index) => {
							resList.push({
								index,
								...item,
								isCollected: true
							})
						})
					} else {
					  res.data.list.forEach((item, index) => {
						resList.push({
						  index,
						  ...item,
						  isCollected: true
						})
					  })
					}
					const {
						total,
						page,
						size
					} = res.data.pageInfoVO
					this.dataList.list = this.dataList.list.concat(resList)
					this.dataList.count = total
					if (page * size >= total && total > 0 || total <= 0) {
						this.dataList.loading = 'nomore'
					} else {
						this.dataList.loading = 'loading'
					}
				}).catch(err => {
					this.dataList.loading = 'noErr'
				})
			},
			// 下拉加载数据
			reachBottom() {
				if (this.dataList.size * this.dataList.page < this.dataList.count) {
					this.dataList.loading = 'loading';
					this.dataList.page++;
					this.getList();
				} else {
					this.dataList.loading = 'nomore';
				}
			},
			// 点击收藏
			onCollect(obj) {
				const {info, index, status} = obj
				const id = info.id || info.specialSubjectId || info.materialsId
				const type = this.activeTab == 1 ? 2 : this.activeTab == 2 ? 6 :this.activeTab == 3 ? 4 : 1
				const params = { businessId: id, collectType: type }
				collectDel(params).then(res=>{
					if(res.data){
						this.dataList.list.splice(index,1)
						uni.showToast({
							title: '已取消',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.page-wrap {
		min-height: calc(100vh);
	}
</style>